<template>
  <div>
    <!-- 顶部栏 -->
    <van-nav-bar
      title="订单"
      left-arrow
      fixed
      @click.left.native="$router.go(-1)"
    >
    </van-nav-bar>
    <!-- 想要进入订单页面必须时登录状态 -->
    <div class="order">
      <van-tabs
        v-model="active"
        swipeable
        style="margin-top: 46px"
        title-active-color="#A7D500"
        color="#A7D500"
      >
        <van-tab title="当前订单" to="/home/orders/now">
          <!-- 当前没有订单样式 -->
          <div class="now_order" v-if="order">
            <van-empty
              class="custom-image"
              :image="require('../assets/imgs/order/balance.png')"
            />
            <div>你还没有点餐</div>
            <div>快去犒劳一下自己吧~</div>
            <van-button round type="info" color="#A7D500" to="/home/products"
              >去点餐</van-button
            >
          </div>
          <!-- 当前存在订单 -->
          <div class="exists_order" v-else style="padding: 0 2vw">
            <van-steps :active="progress">
              <van-step>买家下单</van-step>
              <van-step>商家接单</van-step>
              <van-step>买家提货</van-step>
              <van-step>交易完成</van-step>
            </van-steps>
            <van-card
              num="2"
              price="2.00"
              desc="热/标准甜"
              title="青桔柠檬茶"
              :thumb="require('../assets/imgs/default_head.jpg')"
              thumb-link=""
              :centered="true"
              origin-price="10.00"
            />
            <div class="pay-inf">
              <div>
                <span>保温袋</span>
                <span>￥2.00</span>
              </div>
              <div>
                <span>配送费</span>
                <span>￥5.00</span>
              </div>
              <div>
                <span>新人外卖券</span>
                <span>-￥5.00</span>
              </div>
              <div>
                <span>减配送费</span>
                <span>-￥3.00</span>
              </div>
              <div>
                <span>支付方式</span>
                <span>微信支付</span>
              </div>
              <div>
                <span>微信支付</span>
                <span>￥17.00</span>
              </div>
              <div>
                <span>实付</span>
                <span>￥17.00</span>
              </div>
            </div>
            <div class="pay-inf">
              <div>
                <span>下单时间</span>
                <span>2022.10</span>
              </div>
              <div>
                <span>下单门店</span>
                <span>天津滨海</span>
              </div>
              <div>
                <span>订单号</span>
                <span>1105112416</span>
              </div>
              <div>
                <span>收货地址</span>
                <span>天津滨海塘沽</span>
              </div>
              <div>
                <span>取单号</span>
                <span>2003</span>
              </div>
              <div>
                <span>备注</span>
                <span>无</span>
              </div>
              <div>
                <span>温馨提示</span>
                <span>如有售后问题请联系门店</span>
              </div>
            </div>
            <div class="del">
              <button @click="remOrder">取消订单</button>
            </div>
          </div>
        </van-tab>
        <van-tab title="历史订单" to="/home/orders/history">
          <div class="his_order">
            <van-tabs
              v-model="activeName"
              title-active-color="#A7D500"
              color="#A7D500"
              background="#f3f4f5"
              title-inactive-color="#A0A4A7"
            >
              <van-tab title="全部" name="a">
                <!-- 没人任何历史订单 -->
                <template v-if="hisOrder">
                  <van-empty
                    class="custom-image"
                    :image="require('../assets/imgs/order/empty.png')"
                  />
                  <div>您还没有历史订单哟~</div>
                  <van-button
                    round
                    type="info"
                    color="#A7D500"
                    to="/home/products"
                    >去点餐</van-button
                  >
                </template>
                <!-- 存在历史订单 -->
                <div v-else style="padding: 2vw; background: #f0f3f2">
                  <div class="exist_his">
                    <!-- 定位 -->
                    <div class="opt">
                      <span>天津滨海筋肉</span>
                      <router-link to="/od">已完成></router-link>
                    </div>
                    <!-- 下单时间 -->
                    <div class="time">
                      <span>下单时间</span>
                      <span>2022-10-02</span>
                    </div>
                    <!-- 购买商品规格 -->
                    <div>
                      <div class="shop">
                        <div class="left">
                          <img src="../assets/imgs/default_head.jpg" alt="" />
                        </div>
                        <div class="right">
                          <div>共2件</div>
                          <div>实付￥17.00元</div>
                        </div>
                      </div>
                    </div>
                    <!-- 评价 -->
                    <div class="assess">
                      <a href="">去评价</a>
                    </div>
                  </div>
                </div>
              </van-tab>
              <van-tab title="自取" name="b">
                <!-- 没人任何历史订单 -->
                <template v-if="hisOrder">
                  <van-empty
                    class="custom-image"
                    :image="require('../assets/imgs/order/empty.png')"
                  />
                  <div>您还没有历史订单哟~</div>
                  <van-button
                    round
                    type="info"
                    color="#A7D500"
                    to="/home/products"
                    >去点餐</van-button
                  >
                </template>
                <!-- 存在历史订单 -->
                <div v-else style="padding: 2vw; background: #f0f3f2">
                  <div class="exist_his">
                    <!-- 定位 -->
                    <div class="opt">
                      <span>天津滨海筋肉</span>
                      <span>已完成></span>
                    </div>
                    <!-- 下单时间 -->
                    <div class="time">
                      <span>下单时间</span>
                      <span>2022-10-02</span>
                    </div>
                    <!-- 购买商品规格 -->
                    <div>
                      <div class="shop">
                        <div class="left">
                          <img src="../assets/imgs/default_head.jpg" alt="" />
                        </div>
                        <div class="right">
                          <div>共2件</div>
                          <div>实付￥17.00元</div>
                        </div>
                      </div>
                    </div>
                    <!-- 评价 -->
                    <div class="assess">
                      <a href="">去评价</a>
                    </div>
                  </div>
                </div>
              </van-tab>
              <van-tab title="外卖" name="c">
                <!-- 没人任何历史订单 -->
                <template v-if="hisOrder">
                  <van-empty
                    class="custom-image"
                    :image="require('../assets/imgs/order/empty.png')"
                  />
                  <div>您还没有历史订单哟~</div>
                  <van-button
                    round
                    type="info"
                    color="#A7D500"
                    to="/home/products"
                    >去点餐</van-button
                  >
                </template>
                <!-- 存在历史订单 -->
                <div v-else style="padding: 2vw; background: #f0f3f2">
                  <div class="exist_his">
                    <!-- 定位 -->
                    <div class="opt">
                      <span>天津滨海筋肉</span>
                      <span>已完成></span>
                    </div>
                    <!-- 下单时间 -->
                    <div class="time">
                      <span>下单时间</span>
                      <span>2022-10-02</span>
                    </div>
                    <!-- 购买商品规格 -->
                    <div>
                      <div class="shop">
                        <div class="left">
                          <img src="../assets/imgs/default_head.jpg" alt="" />
                        </div>
                        <div class="right">
                          <div>共2件</div>
                          <div>实付￥17.00元</div>
                        </div>
                      </div>
                    </div>
                    <!-- 评价 -->
                    <div class="assess">
                      <a href="">去评价</a>
                    </div>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      activeName: "a",
      order: false, //假数据，当前存在订单
      progress: 1, //订单进度，后期是后台管理系统控制
      hisOrder: false,
    };
  },
  methods: {
    remOrder() {
      this.$dialog
        .confirm({
          message: "您确定要取消订单吗？",
          theme: "round-button",
        })
        .then(() => {
          //如果点击确定 则取消订单；显示当前无订单页面
          this.order = true;
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  mounted() {},
  watch: {
    order(newValue, oldValue) {
      console.log("order", newValue);
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  background: #f3f4f5;
  //background-color: yellow;
  .now_order,
  .his_order {
    text-align: center;
    color: #818386;
    .van-button {
      width: 50vw;
      margin-top: 3vw;
    }
  }
  .now_order {
    margin-top: 10vw;
    margin-bottom: 50px;
  }
  // 当前订单存在
  .exists_order {
    .pay-inf {
      background-color: #fff;
      margin-top: 2vw;
      font-size: 3.5vw;
      padding: 3vw;
      div {
        display: flex;
        justify-content: space-between;
        margin-top: 1vw;
        padding: 1vw;
      }
    }
    .del {
      padding-top: 5vw;
      margin-bottom: 50px;
      text-align: center;
      background-color: #fff;
      button {
        border: 0;
        padding: 1vw 6vw;
        border-radius: 1vw;
        border: 1px solid #cfcfcf;
        background-color: #fff;
        font-size: 4vw;
      }
    }
  }
  // 历史订单
  .his_order {
    //存在历史订单时
    .exist_his {
      background: #fff;
      padding: 4vw;
      .opt {
        color: #000;
        display: flex;
        justify-content: space-between;
        span:nth-child(2) {
          font-size: 3.5vw;
          color: #818386;
        }
      }
      .time {
        text-align: left;
        font-size: 3vw;
        color: #818386;
      }
      .shop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 3vw;
        padding: 2vw 0;
        border-top: 2px solid #f1f5f2;
        .left {
          width: 20vw;
          img {
            width: 100%;
            display: block;
          }
        }
        .right {
          text-align: right;
          div:nth-child(1) {
            font-size: 3.5vw;
            color: #818386;
          }
          div:nth-child(2) {
            font-size: 4vw;
            color: #000;
          }
        }
      }
      .assess {
        text-align: right;
        a {
          text-align: center;
          display: inline-block;
          width: 20vw;
          height: 8vw;
          line-height: 8vw;
          font-size: 4vw;
          color: #000;
          border-radius: 1vw;
          background-color: #a7e506;
        }
      }
    }
  }
}
</style>
